<template>
	<view class="chatContent">
		<headers v-if="screen"></headers>
		<uv-navbar  v-else :title="'对 话'" @leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<el-container :class="screen?'content-index':'content-index contentOs'">
			<el-aside class="hidden-sm-and-down" width="600px">
				<community :heads="false"></community>
			</el-aside>
			<view class="dialogue" style="">
				<view style="padding:9px;background-color: #fff;display: flex;justify-content: space-between;">
					<view class="">红色游记文章</view>
					<view style="font-size: 14px;">2025-09-05 16:39:08</view>
				</view>
				<view style="display: flex;flex-direction: column;overflow: auto;">
					<view :class="screen?'chatTop':'chatTop chatTopOs'">
						<view v-for="(item,index) in diaCon" :key="JSON.stringify(item)+index">
							<view
								:style="'display: flex;flex-direction:'+(item.role=='user'?'row-reverse':'row')+';align-items: center;'">
								<view>
									<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff"></uv-avatar>
								</view>
								<view @click="clickSS(index)" :class="checked==index ?'chatIte chatchecked':'chatIte'">
									<view v-if="item.role=='user'" class="playright">
										<uv-icon color="#fff" size="30" name="play-right-fill"></uv-icon>
									</view>
									<view v-else class="playleft">
										<uv-icon color="#fff" size="30" name="play-left-fill"></uv-icon>
									</view>
									<view style="z-index: 1;">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<view class="chatBtm">
					<view style="font-size: 20px;display: flex;justify-content: flex-start;align-items: center;">
						<view class="chatItem">
							<el-tooltip effect="light" content="发送表情" placement="bottom">
								<uv-icon size="20" name="account"></uv-icon>
							</el-tooltip>
						</view>
						<view class="chatItem">
							<el-tooltip effect="light" content="发送收藏" placement="bottom">
								<i class="el-icon-paperclip"></i>
							</el-tooltip>
						</view>
						<view class="chatItem">
							<el-tooltip effect="light" content="发送文件" placement="bottom">
								<i class="el-icon-upload"></i>
							</el-tooltip>
						</view>
						<view class="chatItem">
							<el-tooltip effect="light" content="发送记录" placement="bottom">
								<uv-icon size="20" name="chat"></uv-icon>
							</el-tooltip>
						</view>
					</view>
					<view style="display: flex;">
						<!-- autosize="{ minRows: 2, maxRows: 6 }" -->
						<el-input rows="3" class="elInput" type="textarea" placeholder="请输入内容" v-model="textarea"
							maxlength="3000">
						</el-input>
						<uv-button style="margin-right: 10px;" type="primary" text="发送"></uv-button>
					</view>
				</view>
			</view>
		</el-container>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import {
		index,
		task,
		api,
		apiId,
		getScroll,
		scroll,
		delScroll,
	} from '@/common/api.js';
	import {
		fetchEventSource
	} from '@microsoft/fetch-event-source';
	import config from '@/common/config'
	import community from '@/pages/community/index'
	import headers from '@/components/header/header.vue';
	export default {
		components: {
			// 注册组件
			tabbars,
			community,
			headers
		},
		model: {
			prop: 'value', // 对应 props 的属性名
			event: 'input' // 触发事件名
		},
		watch: {
			// 监听data数据的变化
			song(newVal, oldVal) {
				this.$emit('update:disabled', newVal);
			},
		},
		props: {
			value: [String, Array],
		},
		data() {
			return {
				env: config.env,
				textarea: '',
				checked: -1,
				diaCon: [{
						"role": "user",
						"content": "在？"
					},
					{
						"role": "assistant",
						"content": "在的！有什么我可以帮助你的吗？",
						"quota": "0.000764"
					},
					{
						"role": "user",
						"content": "在？"
					},
					{
						"role": "assistant",
						"content": "在的！有什么我可以帮助你的吗？",
						"quota": "0.000764"
					},
					{
						"role": "user",
						"content": "在？"
					},
					{
						"role": "assistant",
						"content": "在的！有什么我可以帮助你的吗？",
						"quota": "0.000764"
					},
					{
						"role": "user",
						"content": "在？"
					},
					{
						"role": "assistant",
						"content": "在的！有什么我可以帮助你的吗？",
						"quota": "0.000764"
					},
					{
						"role": "user",
						"content": "在？"
					},
					{
						"role": "assistant",
						"content": "在的！有什么我可以帮助你的吗？",
						"quota": "0.000764"
					}
				],
			}
		},
		computed: {},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			clickSS(a) {
				this.checked = a;
			},
		}
	}
</script>

<style scoped lang="scss">
	.chatContent {
		border-right: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.content-index {
			height: 100%;

			.dialogue {
				// height: calc(100% - 150px);
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0px;
				background-color: #EDEDED;
			}

			.chatTop {
				height: calc(100vh - 200px);
				overflow: auto;
				padding: 5px 10px;

				.chatIte {
					width: auto;
					margin: 5px 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background-color: #fff;
					padding: 2px 5px;
					border-radius: 5px;
					position: relative;

					.playleft {
						position: absolute;
						left: -10px;
					}

					.playright {
						position: absolute;
						right: -10px;
					}
				}

				.checked {
					color: #333;
					font-weight: bold;
				}
			}

			.chatTopOs {
				height: calc(100vh - 44px);
			}

			.chatBtm {
				// background-color: #FFF;
				border-top: 1px solid #CCC;

				.chatItem {
					cursor: pointer;
					margin-left: 10px;
				}

				.elInput {
					::v-deep .el-textarea__inner {
						border: 0px solid #DCDFE6;
						background-color: rgba(0, 0, 0, 0);
					}
				}
			}
		}

		.contentOs {
			height: calc(100vh - 44px);
		}

	}
</style>